<template>
	<a-card>
		<a-button type="primary" @click="newTemplate = true">新增模板</a-button>
		<s-table ref="table" :columns="columns" :data="loadData" :row-key="(record) => record.id">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'businessTypeId'">
					<span>{{ businessEnum[record.businessTypeId] }}</span>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space :size="20">
						<!-- <a @click="toEdit(record)">编辑</a> -->
						<a @click="deleteTem(record.id)">删除</a>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<a-modal title="新增模板" v-model:visible="newTemplate" @ok="confirm" @cancel="cancel" :confirmLoading="subLoading">
		<a-form>
			<a-form-item label="模板名称">
				<a-input v-model:value="form.templateName"></a-input>
			</a-form-item>
			<a-form-item label="业务类型">
				<a-select v-model:value="form.businessTypeId" :options="businessOptions"></a-select>
			</a-form-item>
			<a-form-item label="上传模板">
				<a-upload
					v-model:file-list="voucherShow"
					name="file"
					:showUploadList="showList"
					:before-upload="beforeUpload"
					accept=".doc,.docx"
				>
					<a-button type="primary">点击上传</a-button>
					<div class="mt-1 text-gray-500">只能上传docx/doc文件</div>
				</a-upload>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script setup>
	import tool from '@/utils/tool'
	import uploadApi from '@/api/dev/fileApi'
	import contractTemplateApi from '@/api/biz/contractTemplateApi'
	import { Modal, message } from 'ant-design-vue'

	const columns = [
		{
			title: '模板名称',
			dataIndex: 'templateName',
			width: 150,
			align: 'center'
		},
		{
			title: '业务类型',
			dataIndex: 'businessTypeId',
			width: 150,
			align: 'center'
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 150,
			align: 'center'
		}
	]
	const loadData = (parameter) => {
		return contractTemplateApi.getTemplateList(parameter).then((res) => {
			return res
		})
	}
	const table = ref()
	/**
	 * 转换数据为枚举对象
	 * @param {*} value 参数
	 */
	const toEnum = (value) => {
		return Object.fromEntries(
			value.map((item) => {
				const arr = []
				arr[0] = item.value
				arr[1] = item.label
				return arr
			})
		)
	}
	const newTemplate = ref(false)
	const businessOptions = tool.dictList('BUSINESS_TYPE')
	const businessEnum = toEnum(businessOptions)

	const form = ref({
		id: undefined,
		businessTypeId: undefined,
		templateName: '',
		fileUrl: ''
	})
	const voucherShow = ref([])
	const showList = ref(true)
	const beforeUpload = (file) => {
		subLoading.value = true
		if (file.size === 0) {
			message.warning('上传文件为空')
			showList.value = false
			return false
		} else {
			showList.value = true
		}
		voucherShow.value = [file]
		const fileData = new FormData()
		fileData.append('file', file)
		uploadApi
			.fileUploadAliyunReturnUrl(fileData)
			.then((res) => {
				form.value.fileUrl = res
				subLoading.value = false
			})
			.finally(() => {
				subLoading.value = false
			})
		return false
	}
	const subLoading = ref(false)
	const confirm = () => {
		if (!form.value.businessTypeId || !form.value.templateName || !form.value.fileUrl) {
			message.warning('请完善模板信息')
			return
		}
		let req
		if (form.value.id) {
			req = contractTemplateApi.editTemplate
		} else {
			req = contractTemplateApi.addTemplate
		}
		subLoading.value = true
		req(form.value).then((res) => {
			table.value.refresh(true)
			cancel()
			subLoading.value = false
			window.open(res)
		})
	}

	const cancel = () => {
		newTemplate.value = false
		form.value.businessTypeId = undefined
		form.value.templateName = ''
		form.value.fileUrl = ''
		voucherShow.value = []
	}
	const toEdit = (record) => {
		form.value.businessTypeId = record.businessTypeId
		form.value.templateName = record.templateName
		form.value.fileUrl = record.fileUrl
		form.value.id = record.id
		newTemplate.value = true
	}
	const deleteTem = (id) => {
		Modal.confirm({
			title: '提示',
			content: '确认删除吗?',
			okText: '确认',
			onOk: () => {
				const params = {
					id
				}
				contractTemplateApi.deleteTemplate(params).then(() => {
					table.value.refresh(true)
				})
			},
			closable: true,
			cancelText: '取消'
		})
	}
</script>
